<script setup lang="tsx">
import { ref } from 'vue';
import { useMouseInElement } from '@vueuse/core'
import type { CurrentPiecePositionType, takeBackType } from './chessPieces';
import * as _ from 'lodash'
import { ElMessage, ElMessageBox } from 'element-plus'
const size = ref(Array(225))
const chessboard = ref<HTMLDivElement>()
const { elementX, elementY } = useMouseInElement(chessboard)
import { Delete } from '@element-plus/icons-vue'
/** 已经下了的棋子 */
const chessPiecesList = ref<CurrentPiecePositionType[]>([])
/**棋子位置，颜色 */
const currentPieceStyle = ref<CurrentPiecePositionType>({ left: 0, top: 0, isBlack: true })
/**是否展示棋子 */
const flag = ref(false)
/**是否胜利 */
const isVictory = ref(false)
/** 记录悔棋次数 */
const takeBack = ref<takeBackType>({
  black: 0,
  white: 0
})

const handleMouseleave = () => {
  if (isVictory.value) return
  if (!flag.value) { flag.value = true }
  if (elementX.value >= 0 && elementY.value >= 0 && elementX.value <= 602 && elementY.value <= 602) {
    currentPieceStyle.value!.left = Math.round(elementX.value / 40) * 40 - 15
    currentPieceStyle.value!.top = Math.round(elementY.value / 40) * 40 - 15
  } else {
    flag.value = false
  }
}

const handleClick = () => {
  if (isVictory.value) return ElMessage.warning('该对局已结束，请重新开始对局')
  let removeBgColor = _.cloneDeep(chessPiecesList.value).map(x => {
    delete x.isBlack
    return x
  })
  let cloneCurrent = _.cloneDeep(currentPieceStyle.value)
  delete cloneCurrent!.isBlack
  if (_.find(removeBgColor, cloneCurrent) == undefined) {
    chessPiecesList.value.push(_.cloneDeep(currentPieceStyle.value) as CurrentPiecePositionType)
    handleIsVictory()
    if (!isVictory.value) {
      currentPieceStyle.value!.isBlack = !currentPieceStyle.value!.isBlack
    }
  }
}

const handleReset = () => {
  chessPiecesList.value = []
  currentPieceStyle.value = { left: 0, top: 0, isBlack: true }
  flag.value = false
  isVictory.value = false
  takeBack.value.black = 0
  takeBack.value.white = 0
}

const handleIsVictory = () => {
  // 横着五个点都是同一个颜色 左右 left + 40 8个点
  // 竖着五个点都是同一个颜色 上下 top + 40  8个点
  // 左斜着五个点都是同一个颜色 left top - 40 8个点
  // 右斜着五个点都是同一个颜色 left top + 40 8个点
  const across1 = [] // 横左
  const across2 = [] // 横右
  const vertical1 = [] // 竖上
  const vertical2 = [] // 竖下
  const leftSideling1 = [] // 左斜上
  const leftSideling2 = [] // 左斜下
  const rightSideling1 = [] // 右斜上
  const rightSideling2 = [] // 右斜下

  for (let index = 1; index < 5; index++) {
    across1.push({
      ...currentPieceStyle.value,
      left: currentPieceStyle.value.left - index * 40
    })
    across2.push({
      ...currentPieceStyle.value,
      left: currentPieceStyle.value.left + index * 40
    })
    vertical1.push({
      ...currentPieceStyle.value,
      top: currentPieceStyle.value.top - index * 40
    })
    vertical2.push({
      ...currentPieceStyle.value,
      top: currentPieceStyle.value.top + index * 40
    })
    leftSideling1.push({
      ...currentPieceStyle.value,
      top: currentPieceStyle.value.top - index * 40,
      left: currentPieceStyle.value.left - index * 40,
    })
    leftSideling2.push({
      ...currentPieceStyle.value,
      top: currentPieceStyle.value.top + index * 40,
      left: currentPieceStyle.value.left + index * 40,
    })
    rightSideling1.push({
      ...currentPieceStyle.value,
      top: currentPieceStyle.value.top - index * 40,
      left: currentPieceStyle.value.left + index * 40,
    })
    rightSideling2.push({
      ...currentPieceStyle.value,
      top: currentPieceStyle.value.top + index * 40,
      left: currentPieceStyle.value.left - index * 40,
    })
  }
  let arr = _.cloneDeep(chessPiecesList.value.filter(a => a.isBlack === currentPieceStyle.value.isBlack))

  let a1 = 0
  let a2 = 0
  let a3 = 0
  let a4 = 0
  let a5 = 0
  let a6 = 0
  let a7 = 0
  let a8 = 0
  for (let index = 0; index < 4; index++) {
    _.findIndex(arr, across1[index]) != -1 ? a1 += 1 : ''
    _.findIndex(arr, across2[index]) > -1 ? a2 += 1 : ''
    _.findIndex(arr, vertical1[index]) > -1 ? a3 += 1 : ''
    _.findIndex(arr, vertical2[index]) > -1 ? a4 += 1 : ''
    _.findIndex(arr, leftSideling1[index]) > -1 ? a5 += 1 : ''
    _.findIndex(arr, leftSideling2[index]) > -1 ? a6 += 1 : ''
    _.findIndex(arr, rightSideling1[index]) > -1 ? a7 += 1 : ''
    _.findIndex(arr, rightSideling2[index]) > -1 ? a8 += 1 : ''
    if (a1 == 4 || a2 == 4 || a3 == 4 || a4 == 4 || a5 == 4 || a6 == 4 || a7 == 4 || a8 == 4) {
      ElMessage.success(`恭喜 ${currentPieceStyle.value.isBlack ? "黑色方" : '白色方'} 胜利`)
      isVictory.value = true
      break
    }
  }
}

const handleTakeBack = async () => {

  if (currentPieceStyle.value!.isBlack && takeBack.value.black >= 3 || !currentPieceStyle.value!.isBlack && takeBack.value.white >= 3) {
    return ElMessage.warning('不能在悔棋了哦！')
  }
  const confirm = await ElMessageBox({
    type: 'warning',
    title: '温馨提示',
    showCancelButton: true,
    confirmButtonText: '同意',
    cancelButtonText: '取消',
    message: () => {
      return <>
        <div>同意{!currentPieceStyle.value!.isBlack ? '黑色' : '白色'}悔棋吗？</div>
        <div class="mt8">Tips:一局只能悔棋三次哦！当前第{!currentPieceStyle.value!.isBlack ? takeBack.value.black : takeBack.value.white}次</div>
      </>
    }
  }).catch(e => e)
  if (confirm != 'confirm') return
  currentPieceStyle.value!.isBlack ? takeBack.value.black++ : takeBack.value.white++
  chessPiecesList.value.splice(chessPiecesList.value.length - 1, 1)
  currentPieceStyle.value!.isBlack = !currentPieceStyle.value!.isBlack
}
</script>
<!-- 15 * 15 225个棋子 -->
<!-- 左右默认 加减40 -->
<!-- 判断是否胜利 
  1、胜利条件  横着五个点都是同一个颜色 左右 left + 40 8
              竖着五个点都是同一个颜色 上下 top + 40  8
              左斜着五个点都是同一个颜色 left top - 40 8
              右斜着五个点都是同一个颜色 left top + 40 8
-->
<template>
  <div class="w100vw h100vh center flex-col bg-red-50" @mousemove="handleMouseleave">
    <div ref="chessboard" class="flex chessboard w602 flex-wrap relative" @click="handleClick">
      <div v-for="i in size" :key="i" class="w40 h40 border-0.5 border-solid border-#a52a2a" />
      <div class="absolute w30 h30 rounded-full" v-for=" item in chessPiecesList"
        :style="{ left: item.left + 'px', top: item.top + 'px', backgroundColor: item.isBlack ? 'black' : 'white' }" />
      <div class="absolute w30 h30 rounded-full opacity-60" v-if="flag"
        :style="{ left: currentPieceStyle.left + 'px', top: currentPieceStyle.top + 'px', backgroundColor: currentPieceStyle.isBlack ? 'black' : 'white' }" />
    </div>
    <div class="mt20">
      <div class="mb10">
        当前：{{ currentPieceStyle.isBlack ? '黑棋' : '白棋' }}
      </div>
      <el-button @click="handleReset">重新开始</el-button>
      <el-button @click="handleTakeBack" type="danger" :icon="Delete" circle :disabled="!chessPiecesList.length" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.chessboard {
  border: .5px solid #a52a2a;
  font-size: 12px;
  background-color: #ffc484;

  .transparency {
    animation: oceanAnimation 2s linear infinite;
  }

  @keyframes oceanAnimation {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
}
</style>
